<template>
	<view class="page">
		<view class="top-bg">
			<image src="../../static/work/work_bg.png"></image>
			<view class="head-text">
				<text>工作台</text>
				<image
					src="../../static/work/work_msg.png"
					mode="scaleToFill"
					class="msg"
					:style="{ '--width': widthvar }"
					@click="goMsg"></image>
			</view>
			<image
				src="../../static/work/work_head.png"
				mode="scaleToFill"
				class="head-img"
				@click="showPop"></image>
		</view>

		<view
			style="padding-bottom: 5rpx; margin-bottom: 10rpx"
			v-for="(item, index) in workdata"
			:key="index">
			<work-item :workdata="item"></work-item>
		</view>

		<sidebar :showSidebar="showSidePop" @input="sidebarChange"></sidebar>

		<!-- 底部导航 -->
		<HomeTabbar :tab="0"></HomeTabbar>
	</view>
</template>

<script>
	// import httpApi from '@/common/http.api.js';
	import sidebar from '../../components/work/sidebar.vue';
	import workItem from '../../components/work/work-item.vue';
	// import workContentItem from '../../components/work/work-content-item.vue';
	import HomeTabbar from '@/components/tabbar.vue';

	export default {
		components: {
			sidebar,
			workItem,
			HomeTabbar,
			// workContentItem,
		},
		data() {
			return {
				title: 'Hello',
				result: {},
				showSidePop: false,
				isShowUnread: true,
				widthvar: '-15rpx',
				workdata: [],
			};
		},

		onLoad() {
			this.getSystemDict();
			this.getActiveEnable();
			this.getfilterCondition();
			this.getBrandSeriesModel();
			this.getWarehouse();
			this.getInsuranceCompanyList();
		},

		onShow() {
			this.getIsNotRead();
			this.workbench();
		},

		methods: {
			getSystemDict() {
				this.$u.api.getCarCommon().then(res => {
					// if (res.code == 1) {

					var accessoryItems = res.accessoryItem;
					for (var item of accessoryItems) {
						item.checked = false;
					}

					//TODO 最后把这行删了
					// res.vehicleMonitorFlag = 1

					// this.$u.vuex("getCarCommon", res);
					this.$store.commit('params/getCarCommon', res);
					// }
				});
				// console.log("---请求地址----" + httpApi.k_api_getCarCommon);
				// this.$u.get(httpApi.k_api_getCarCommon, {
				// 	// this.$u.get("app/common/sys/dict", {

				// }).then(res => {
				// 	console.log(res);

				// })
			},

			getBrandSeriesModel() {
				this.$u.api.brandseriesmodel().then(res => {
					// if (res.code == 1) {
					this.$store.commit('params/brandseriesmodel', res);
					// }
				});
			},
			getWarehouse() {
				this.$u.api
					.warehouseList({
						type: 2,
					})
					.then(res => {
						// if (res.code == 1) {
						this.$store.commit('params/warehouseList', res);
						// }
					});
			},

			getInsuranceCompanyList() {
				this.$u.api.getInsuranceCompanyList().then(res => {
					// if (res.code == 1) {
					this.$store.commit('params/insuranceCompanyList', res);
					// }
				});
			},

			getActiveEnable() {
				this.$u.api.activitiEnable().then(res => {
					// if (res.code == 1) {
					this.$store.commit('params/activitiEnable', res);
					// }
				});
			},

			getfilterCondition() {
				this.$u.api.getFilterCondition().then(res => {
					// if (res.code == 1) {
					res = res.concat([
						{
							type: 'orderSortType',
							name: '列表排序',
							childList: [
								{
									id: '1',
									value: '提单时间由近到远',
									logo: null,
									code: '1',
								},
								{
									id: '2',
									value: '提单时间由远到近',
									logo: null,
									code: '2',
								},
								{
									id: '3',
									value: '交车时间由近到远',
									logo: null,
									code: '3',
								},
								{
									id: '4',
									value: '交车时间由远到近',
									logo: null,
									code: '4',
								},
							],
						},
						{
							type: 'placeOrderType',
							name: '下单类型',
							childList: [
								{
									id: '1',
									value: '平台下单',
									logo: null,
									code: '1',
								},
							],
						},
						{
							type: 'applyType',
							name: '审批类型',
							childList: [
								{
									id: '1',
									value: '长租提单',
									logo: null,
									code: '1',
								},
								{
									id: '2',
									value: '租售提单',
									logo: null,
									code: '2',
								},
								{
									id: '3',
									value: '长租退车',
									logo: null,
									code: '3',
								},
								{
									id: '4',
									value: '租售退车',
									logo: null,
									code: '4',
								},
								{
									id: '5',
									value: '长租换车',
									logo: null,
									code: '5',
								},
								{
									id: '6',
									value: '全部',
									logo: null,
									code: '6',
								},
								{
									id: '7',
									value: '租售换车',
									logo: null,
									code: '7',
								},
							],
						},
					]);

					this.$store.commit('params/filterCondition', res);
					// }
				});
			},

			getIsNotRead() {
				this.$u.api.apiIsNotRead().then(res => {
					// if (res.code == 1) {
					console.log(res);
					if (res == 1) {
						this.widthvar = '0';
					} else {
						this.widthvar = '-15rpx';
					}
					// }
				});
			},

			goMsg() {
				uni.navigateTo({
					url: '/pagesA/message/message-list',
				});
			},

			workbench() {
				this.$u.api
					.workbench()
					.then(res => {
						// if (res.code == 1) {
						console.log(res);

						this.workdata = res;

						// }
					})
					.catch(e => {
						uni.reLaunch({
							url: '/pages/login/login',
						});
					});
			},

			showPop() {
				this.showSidePop = true;
			},

			logout() {},

			sidebarChange(value) {
				this.showSidePop = value;
				// if (value) {
				// 	uni.hideTabBar({

				// 	})
				// } else {
				// 	uni.showTabBar({

				// 	})
				// }
			},

			goRenewal() {
				uni.navigateTo({
					url: '../renewal/renewallist',
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f5f5f5;
	}

	.top-bg {
		position: relative;

		image:nth-child(1) {
			width: 100%;
			height: 300rpx;
		}

		.head-text {
			// display: inline-flex;
			position: absolute;
			top: 95rpx;
			left: 30rpx;
			color: white;
			// font-size: 32rpx;
			font-weight: 500;

			// align-items: center;
			text {
				font-size: 36rpx;
				vertical-align: middle;
			}

			.msg {
				position: relative;
				width: 28rpx;
				height: 32rpx;
				vertical-align: middle;
				margin-left: 15rpx;

				&::after {
					position: absolute;
					right: var(--width);
					top: 0;
					content: '';
					border: red solid 6rpx;
					border-radius: 100%;
				}
			}
		}

		.head-img {
			position: absolute;
			bottom: 30rpx;
			left: 30rpx;
			width: 90rpx;
			height: 90rpx;
		}
	}
</style>
